Obsługa zdarzenia OnChange dla przycisku radiowego (INPUT type="radio") nie działa jako jedna wartość

Dokonałbym dwóch zmian:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. Użyj funkcji obsługi onclick zamiast onchange - zmieniasz "stan sprawdzony" wejścia radiowego, a nie value, więc nie dzieje się zdarzenie zmiany.
2. użyj jednej funkcji i podaj this jako parametr, który ułatwi sprawdzenie, która wartość jest aktualnie wybrana.

ETA: wraz z funkcją handleClick() możesz śledzić oryginalną / starą wartość radia w zmiennej o zasięgu strony. Że jest:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

Jak widać na tym przykładzie: http://jsfiddle.net/UTwGS/

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

JQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

Zarówno zdarzenia click jak i change są wywoływane po wybraniu opcji przycisku radiowego (przynajmniej w niektórych przeglądarkach).

Powinienem również zwrócić uwagę, że w moim przykładzie Zdarzenie click jest nadal wywoływane, gdy używasz tab i klawiatury, aby wybrać opcję.

Chodzi mi o to, że mimo że wywołane jest Zdarzenie change to niektóre przeglądarki click wydarzenie powinno dostarczyć potrzebnego zasięgu.

A co z użyciem zdarzenia zmiany w Jquery?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

Jsfiddle: http://jsfiddle.net/f8233x20/

Możesz dodać następujący skrypt JS

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

Myślę, że nie ma innego sposobu niż przechowywanie poprzedniego stanu. Oto rozwiązanie z jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

Po zastanowieniu się nad tym, postanowiłem pozbyć się zmiennej i dodać / usunąć klasę. Oto co mam: http://jsfiddle.net/BeQh3/2/

Zdaję sobie sprawę, że to stary problem, ale ten fragment kodu działa dla mnie. Być może komuś w przyszłości się przyda:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

Jak widać tutaj: http://www.w3schools.com/jsref/event_onchange.asp Atrybut onchange nie jest obsługiwany dla przycisków radiowych.

Pierwsze pytanie SO, z którym się łączysz, daje Ci odpowiedź: użyj zdarzenia onclick i sprawdź stan przycisku radiowego wewnątrz wyzwalanej funkcji.

Tak nie ma zdarzenia change dla aktualnie wybranego przycisku radiowego. Ale problem polega na tym, że każdy przycisk radiowy jest traktowany jako osobny element. Zamiast tego Grupa Radiowa powinna być uważana za pojedynczy element, taki jak select. Tak więc dla tej grupy zostanie wywołane zdarzenie change. Jeśli jest to element select, nigdy nie przejmujemy się każdą opcją w nim zawartą, ale bierzemy tylko wybraną opcję. Przechowujemy bieżącą wartość w zmiennej, która stanie się poprzednią wartością, gdy zostanie wybrana nowa opcja. Podobnie musisz użyć osobna zmienna do przechowywania wartości zaznaczonego przycisku radiowego.

Jeśli chcesz zidentyfikować Poprzedni Przycisk radiowy, musisz zapętlić Zdarzenie mousedown.

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

Zobacz to: http://jsfiddle.net/diode/tywx6/2/

Przechowuj poprzednie sprawdzone radio w zmiennej:
http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

JS PRZYKŁADOWY KOD

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

To jest tuż po mojej głowie, ale możesz zrobić Zdarzenie onClick dla każdego przycisku radiowego, dać im wszystkie różne identyfikatory, a następnie zrobić pętlę for w zdarzeniu, aby przejść przez każdy przycisk radiowy w grupie i znaleźć, który został sprawdzony patrząc na atrybut 'checked'. Identyfikator sprawdzonej zmiennej będzie przechowywany jako zmienna, ale możesz najpierw użyć zmiennej temp, aby upewnić się, że wartość tej zmiennej została zmieniona, ponieważ zdarzenie click uruchomi się bez względu na to, czy nowa przycisk radiowy został zaznaczony.

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

Jeśli chcesz uniknąć skryptu wbudowanego, możesz po prostu słuchać zdarzenia kliknięcia w radiu. Można to osiągnąć za pomocą zwykłego Javascript, nasłuchując zdarzenia kliknięcia na

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

To działa dla mnie

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

Najprostszy i moc pełna droga

Tylko do odczytu wejścia radiowe za pomocą getAttribute

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2

Jest to najprostsza i najbardziej efektywna funkcja w użyciu po prostu dodaj tyle przycisków, ile chcesz do checked = false i spraw, aby Zdarzenie onclick każdego przycisku radiowego wywołało tę funkcję. Wyznacz unikalny numer dla każdego radia button

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

Z jakiegoś powodu, najlepsza odpowiedź nie działa dla mnie.

Poprawiłem najlepszą odpowiedź przez użycie

    var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');

Oryginalna najlepsza odpowiedź:

      var rad = document.myForm.myRadios;

var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');
                              console.log('overlayType_radio', overlayType_radio)

                              var prev = null;
                              for (var i = 0; i < overlayType_radio.length; i++) {
                                  overlayType_radio[i].addEventListener('change', function() {
                                      (prev) ? console.log('radio prev value',prev.value): null;
                                      if (this !== prev) {
                                          prev = this;
                                      }
                                      console.log('radio now value ', this.value)
                                  });
                              }

Html to:

<div id='overlay-div'>
                        <fieldset>
                                <legend> Overlay Type </legend>
                                
                                <p>
                                    <label>
                                      <input class='with-gap' id='overlayType_image' value='overlayType_image' name='radio_overlaytype' type='radio' checked/>
                                      <span>Image</span> 
                                    </label>
                                </p>

                                <p>
                                  <label>
                                    <input class='with-gap' id='overlayType_tiled_image' value='overlayType_tiled_image' name='radio_overlaytype' type='radio' disabled/>
                                    <span> Tiled Image</span>   
                                </p>

                                <p>
                                  <label>
                                    <input class='with-gap' id='overlayType_coordinated_tile' value='overlayType_coordinated_tile' name='radio_overlaytype' type='radio'  disabled/>
                                    <span> Coordinated Tile</span>  
                                </p>

                                <p>
                                  <label>
                                    <input class='with-gap' id='overlayType_none' value='overlayType_none' name='radio_overlaytype' type='radio'/>
                                    <span> None </span>            
                                  </p>

                                  
                          </fieldset>
                       </div>

 var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');
                                  console.log('overlayType_radio', overlayType_radio)

                                  var prev = null;
                                  for (var i = 0; i < overlayType_radio.length; i++) {
                                      overlayType_radio[i].addEventListener('change', function() {
                                          (prev) ? console.log('radio prev value',prev.value): null;
                                          if (this !== prev) {
                                              prev = this;
                                          }
                                          console.log('radio now value ', this.value)
                                      });
                                  }

<div id='overlay-div'>
                            <fieldset>
                                    <legend> Overlay Type </legend>
                                    
                                    <p>
                                        <label>
                                          <input class='with-gap' id='overlayType_image' value='overlayType_image' name='radio_overlaytype' type='radio' checked/>
                                          <span>Image</span> 
                                        </label>
                                    </p>

                                    <p>
                                      <label>
                                        <input class='with-gap' id='overlayType_tiled_image' value='overlayType_tiled_image' name='radio_overlaytype' type='radio' />
                                        <span> Tiled Image</span>   
                                    </p>

                                    <p>
                                      <label>
                                        <input class='with-gap' id='overlayType_coordinated_tile' value='overlayType_coordinated_tile' name='radio_overlaytype' type='radio'  />
                                        <span> Coordinated Tile</span>  
                                    </p>

                                    <p>
                                      <label>
                                        <input class='with-gap' id='overlayType_none' value='overlayType_none' name='radio_overlaytype' type='radio'/>
                                        <span> None </span>            
                                      </p>

                                      
                              </fieldset>
                           </div>

Jsfiddle kliknij tutaj

Https://jsfiddle.net/hoogw/jetmkn02/1/

<script>
    function radioClick(radio){
        alert()
    }
</script>

<label>Cash on delivery</label>
<input type="radio" onclick="radioClick('A')" name="payment_method" class="form-group">

<br>

<label>Debit/Credit card, GPay, Paytm etc..</label>
<input type="radio" onclick="radioClick('B')" name="payment_method" class="form-group">